const path = require('path')

// 拼接路径
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px-to-viewport')({
                        unitToConvert: 'px',
                        viewportWidth: 1000,
                        unitPrecision: 3,
                        propList: ['*'],
                        selectorBlackList: ['.mobile-to-pc', /.*--pc$/],
                        viewportUnit: 'rem',
                        fontViewportUnit: 'rem',
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: [/(\/|\\)(node_modules)(\/|\\)/, /--pc.styl$/],
                    }),
                ],
            },
        },
    },
    chainWebpack: config => {
        // 使用 alias 简化路径
        config.resolve.alias
            .set('@', resolve('src/'))
            .set('@common', resolve('src/common'))
            .set('@components', resolve('src/components'))

        // pug配置
        config.module
            .rule('pug')
            .test(/\.pug$/)
            .use('pug-html-loader')
            .loader('pug-html-loader')
            .end()
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'stylus'
        },
    },
}
